"use client";
import React, { useState } from "react";
import Link from "next/link";
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";

import {
  BookOutlined,
  UserOutlined,
  VideoCameraOutlined,
  OrderedListOutlined,
} from "@ant-design/icons";
import { Button, Layout, Menu, theme } from "antd";
import { link } from "fs";
import { useRouter } from "next/navigation";
const { Header, Sider, Content } = Layout;
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

const Home = ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const router = useRouter();

  const routes = [
    {
      key: "/little_jia/dingdan/allding",
      icon: <UserOutlined />,
      label: "回款计划",
    },
    {
      key: "/little_jia/dingdan/mydingdan",
      icon: <VideoCameraOutlined />,
      label: "回款管理",
    },
    {
      key: "/little_jia/dingdan/xiashudingdan",
      icon: <VideoCameraOutlined />,
      label: "发票管理",
    },
    {
      key: "/little_jia/dingdan/woxiezuo",
      icon: <VideoCameraOutlined />,
      label: "费用管理",
    },
    {
      key: "/little_jia/dingdan/xiashuxiezuo",
      icon: <VideoCameraOutlined />,
      label: "报销管理",
    },
  ];

  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Layout style={{ height: "100vh" }}>
          <Sider style={{ background: "#435188" }} collapsed={true}>
            <div className="demo-logo-vertical" />
            <Menu
              theme="dark"
              mode="inline"
              style={{ background: "#435188" }}
              defaultSelectedKeys={["1"]}
              onSelect={(i) => {
                router.push(i.key);
              }}
              items={[
                
                {
                  key: "/fff",
                  icon: <OrderedListOutlined />,
                  label: "订单管理",
                },
                {
                  key: "/liyi",
                  icon: <UserOutlined />,
                  label: "系统管理",
                },
                {
                  key: "/lxt",
                  icon: <BookOutlined />,
                  label: "客服管理",
                },
                {
                  key: "/little_jia",
                  icon: <UserOutlined />,
                  label: "财务管理",
                },
              ]}
            />
          </Sider>

          <Sider width="150px" style={{ background: "skyblue" }}>
            <div className="demo-logo-vertical" />
            财务管理
            <Menu
              style={{ background: "skyblue" }}
              theme="dark"
              mode="inline"
              defaultSelectedKeys={["1"]}
              onSelect={(i) => {
                router.push(i.key);
              }}
              items={routes}
            />
          </Sider>

          <Layout>
            <Header style={{ padding: 0, background: colorBgContainer }}>
              {/* 顶部 */}
            </Header>
            <Content
              style={{
                margin: "24px 16px",
                padding: 24,
                minHeight: 280,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
              }}
            >
              {children}
            </Content>
          </Layout>
        </Layout>
      </body>
    </html>
  );
};

export default Home;
